import React, { useState, memo, useEffect, useMemo, useRef } from 'react';
import styles from './index.less'




function Atable({ content, setconfig, style, rowcol, dataSource }) {
    const { borderColor, borderWidth, align, headersize, headercolor, bodybg, bodysize, bodycolor } = style;
    const gridTemplateColumns = useMemo(() => {
        let dis = new Array(rowcol.col).fill("1fr");
        return dis.join(" ");
    }, [rowcol])
    return (
        <div
            style={{ ...style, position: "absolute", overflow: "hidden", border: "none" }}
        >
            <div
                className={styles.table}
                id="fixtable"
                style={{
                    gridTemplateColumns,
                    backgroundColor: borderColor,
                    gap: borderWidth,
                    padding: borderWidth,
                    borderRadius: style.borderRadius,
                    overflow: "hidden"
                }}
            >
                {
                    dataSource && dataSource.map((it, i) => {
                        return <div
                            key={it.id}
                            style={it.startrow ? {
                                ...it.style,
                                gridArea: `${it.startrow} / ${it.startcol} / span ${it.rowNum} / span ${it.columnNum}`,
                                display: it.style.display ?? "flex"
                            } : {
                                ...it.style,
                                display: it.style.display ?? "flex"
                            }}

                        >
                            <div className={styles.cell} style={{justifyContent: align}}>
                                {
                                    it["content"]
                                }
                            </div>
                        </div>
                    })
                }



            </div>
        </div>
    );
}

export default memo(Atable);